<template>
	<view class="container">

		<view class="header">
			<view class="header-input">
				<icon type="search" :size='13' color='#888'></icon>
				<input confirm-type="search" :placeholder="hots.length > 0 ? '大家都在搜：' + hots[0] : '搜索您想要的'" :focus="true"
					auto-focus placeholder-class="header-input-holder" class="header-input-box" v-model.trim="key"
					@input="inputKey" @confirm="searchKey" />
				<icon type="clear" :size='13' color='#888' @tap="cancel" v-show="key"></icon>
			</view>
			<view class="header-cancle" @tap="cancel(true)">取消</view>
		</view>

		<view class="history" v-show="history.length > 0 && !key">
			<view class="history-header">
				<view class="tui-search-title">搜索历史</view>
			</view>
			<view class="history-content">
				<block v-for="(item, index) in history" :key="index">
					<uv-tags @click="doSearch(item.keys)" shape="round" plain type="error" :text="item.keys"
						:customStyle="{ margin: '0 24rpx 24rpx 0', padding: '16rpx 30rpx', borderRadius: '50rpx' }" />
				</block>
			</view>
		</view>
		<view class="history" v-show="hots.length > 0 && !key">
			<view class="history-header">
				<view class="tui-search-title">大家正在搜</view>
			</view>
			<view class="history-content">
				<block v-for="(item, index) in hots" :key="index">
					<uv-tags @click="doSearch(item)" shape="round" plain :text="item"
						:customStyle="{ margin: '0 24rpx 24rpx 0', padding: '16rpx 30rpx', borderRadius: '50rpx' }" />
				</block>
			</view>
		</view>
		<view class="result" v-show="key">
			<view class="result-header">
				<view class="result-header-left" @tap="doSearch(key)">搜索 “{{ key }}”</view>
			</view>
			<view class="result-content">
				<block v-for="(item, index) in searchList" :key="index">
					<view class="result-content-item" @tap="doSearch(item.key)" :hover-stay-time="150">
						<rich-text :nodes="item.showKey" />
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script lang="ts">

import { TaUtil, TaDataGoods, TaDataActionSearch, TaDataUser } from '@/utils'

export default {
	data() {
		return {
			key: <string>"",
			hots: <any[]>[],
			history: <any[]>[],
			searchList: <any[]>[]
		}
	},
	onLoad() {
		this.initData();
	},
	methods: {
		initData() {
			if (TaDataUser.isLogin()) {
				TaDataActionSearch.get().then((ret: any) => {
					ret.code == 1 && (this.history = ret.data.list);
				})
			}
			TaDataActionSearch.hot().then((ret: any) => {
				ret.code == 1 && (this.hots = ret.data.keys);
			})
		},
		// 跳转到商品搜索
		doSearch(key: string) {
			uni.navigateTo({
				url: `/pages/goods/index?keys=${key}`
			})
		},
		// 清除关键词并跳转
		cancel(force: boolean = false) {
			this.key = '';
			force && this.doSearch(this.key);
		},
		inputKey(e: any) {
			this.key = TaUtil.trim(e.detail.value);
			this.searchKey();
		},
		searchKey() {
			if (!this.key) {
				this.searchList = [];
				return;
			}
			//根据关键词查找
			let list: any[] = []
			//实际开发中，根据搜索返回结果集，此处只是做展示提示搜索哪些文字
			TaDataGoods.withSuggest(this.key).then((ret: any) => {
				if (ret.code == 1 && ret.data.keys) {
					ret.data.keys.map((item: any) => {
						list.push({ key: item, showKey: TaUtil.replaceAll(item, this.key, `<label style="color:#E41F19">${this.key}</label>`) })
					})
					this.searchList = list
				}
			})
		}
	}
}
</script>

<style lang="scss">
@import './search.scss';
</style>